Live-Übertragungen mit der Vonage Video API
Mit der Video API von Vonage können Sie so gut wie jedes gewünschte Videoerlebnis erstellen. Ein häufiger Anwendungsfall für Entwickler sind Situationen, in denen eine oder wenige Personen an ein größeres Publikum senden, das nur zuhört, z. B. Teilnehmer, die einen Live-Stream einer Konferenz verfolgen.
In diesem Lernprogramm
Mit der Vonage Video API können Sie schnell einen Raum einrichten, in dem eine einzelne Person senden kann und andere Personen sich anschließen und zusehen können. Wir gehen darauf ein, wie Sie eine Demo mit unseren bestehenden Demos zum Laufen bringen, so dass Sie keinen Code schreiben müssen, aber wir werden auch erklären, was der Code im Hintergrund tut.
- Siehe die Demo - Probieren Sie die Demo aus, ohne Code zu schreiben
- Wie die Demo funktioniert - Die Client-Seite - Was der Code auf der Client-Seite macht
- So funktioniert die Demo - Die Serverseite - Was der serverseitige Code macht
Voraussetzungen
Um das Tutorial abzuschließen, benötigen Sie:
- A Vonage-Konto - für Ihren API-Schlüssel und Ihr Geheimnis
Siehe die Demo
Wenn Sie die Demo ausprobieren möchten, bevor wir den Code schreiben, haben wir einen Beispiel-Webserver und JavaScript-Code, um zu testen, wie ein einfacher Videoanruf aussieht. Der gesamte Code ist quelloffen und öffentlich zugänglich, so dass Sie die Demo ausprobieren und dann den Code verwenden können, um Ihre eigenen Änderungen vorzunehmen.
Starten Sie den Node.js-Server
Die Video-Demo erfordert einen Backend-Server, der Dinge wie die Erstellung von Client-Tokens für die Autorisierung und die allgemeine Sitzungsverwaltung übernimmt. Sie können dies in jeder beliebigen Sprache erstellen, aber wir haben einen vorgefertigten Server, den Sie für den Anfang verwenden können, und zwar unter Vonage Video Learning Server (Node.js) auf Code Hub. Von der Dokumentation für EntwicklerKlicken Sie in der oberen Navigationsleiste auf "Code Hub" und scrollen Sie dann nach unten, um die Karte für "Vonage Video Learning Server (Node.js)" zu finden. Klicken Sie darauf, um sie zu öffnen.
Sie erhalten eine Beschreibung dessen, was dieses Projekt tut. Klicken wir zunächst auf "Code abrufen", damit wir ihn in den Code Hub Online-Editor laden können. Klicken Sie auf "Create a new development environment". Nennen Sie den Arbeitsbereich "Vonage Video Demo", da wir dieses Backend für mehrere Demos verwenden können. Dieser Demo muss eine Nummer zugewiesen werden, da der Lernserver Telefonanrufe über SIP unterstützt. Wir werden diese Funktion in dieser Demo nicht verwenden. Klicken Sie auf "Nummer zuweisen", um eine vorhandene Nummer von Vonage zuzuweisen, oder erwerben Sie eine neue Nummer, die Sie bei späteren Demos verwenden können.
Code Hub wird automatisch eine Anwendung für Sie erstellen, einschließlich der Einrichtung der öffentlichen und privaten Schlüssel, die unsere Anwendung verwenden wird. Sobald der Arbeitsbereich erstellt ist, werden Sie in den Code-Editor weitergeleitet, der eine Online-Version von Visual Studio Code ist. Sie können die weiteren Teile dieser Demo verfolgen, um den Code zu sehen, und Sie können diesen Code nach Bedarf für Ihre eigenen Projekte bearbeiten.
Um die Anwendung auszuführen, klicken Sie oben im Editor auf "Ansicht" und dann auf "Terminal". Dadurch wird eine Befehlszeile geöffnet, in der wir Befehle ausführen können. Alles, was wir tun müssen, ist Folgendes einzugeben vcr deploy und der Code wird bereitgestellt. Dies wird einige Augenblicke dauern, da der Code verpackt und auf den Vonage Code Hub Servern ausgeführt wird. Notieren Sie sich die "Instanz-Host-Adresse", die am Ende ausgegeben wird.
Wenn alles richtig funktioniert, sollten Sie die "Instance-Host-Adresse" aufrufen können und die folgende Seite angezeigt bekommen:
Testen Sie das Frontend
Der Backend-Server funktioniert direkt mit allen unseren vorgefertigten Demos, einschließlich dieser Einzel-Demo. Gehen Sie rüber zu https://github.com/Vonage-Community/video-api-web-samples/tree/main/Live-Broadcastdas ist der Quellcode für den Front-End-Teil dieser Demo. Bei diesem Beispiel können zwei Benutzer mit der URL der Demo beitreten.
Der einfachste Weg, diese Demo zu starten, ist ein Klick auf die Schaltfläche "Open in Stackblitz" in der README.
Dadurch wird das Projekt in Stackblitz geöffnet. Wie beim Backend-Server können Sie hier den Code durchsuchen und ändern, wenn Sie möchten. Für diese Demo müssen wir nur das Projekt js/config.js Datei und fügen Sie die URL der Code Hub-Instanz in die SAMPLE_SERVER_BASE_URL variabel:
Sobald Sie die Datei gespeichert haben, können Sie die Demoansicht auf der rechten Seite von Stackblitz aktualisieren. Dieses Beispiel ist in mehrere Teile unterteilt, darunter eine Host-Ansicht und zwei verschiedene Möglichkeiten, das Video selbst anzusehen. Wir werden uns auf die Nicht-RTMP-Übertragung konzentrieren.
So funktioniert die Demo
Konfigurieren einer Vonage-Applikation
Damit unsere Videoanwendung funktioniert, müssen unser Client und unser Server mit den Vonage-Servern kommunizieren können. Code Hub konfiguriert dies für uns, aber wenn Sie den Code lokal ausführen oder wissen möchten, was das bedeutet, wird eine Video-App wie eine andere API konfiguriert. Wir müssen eine Vonage Application einrichten, die die gesamte Konfiguration für unsere Anwendung enthält und uns dabei hilft, die notwendigen Elemente für die Authentifizierung zu generieren.
Gehen Sie zu Ihrem Vonage Kunden Dashboard und melden Sie sich an. Sobald Sie eingeloggt sind:
- Klicken Sie auf "Applications" unter "Build".
- Klicken Sie auf "Eine neue Anwendung erstellen".
- Geben Sie der Anwendung einen Namen, z. B. "Basic Video Demo".
- Klicken Sie auf "Öffentlichen und privaten Schlüssel generieren", woraufhin Sie eine Datei namens
private.key. Bewahren Sie diese Datei für später auf. - Scrollen Sie nach unten und schalten Sie "Video" ein. Wir lassen diese Werte vorerst leer.
- Klicken Sie auf "Neue Anwendung generieren", um die Anwendung zu erstellen.
Sobald die Anwendung erstellt ist, notieren Sie sich die Application ID. Wenn Sie den Code lokal ausführen, benötigen wir diese zur Konfiguration des Backends. Wenn Sie Code Hub verwenden, hat der Servercode bereits Zugriff auf die Application ID und den Private Key.
Die Kundenseite
Der client-seitige Teil der Demo besteht aus zwei verschiedenen Teilen - einigen HTML-Elementen, um die Video-Feeds einzubinden, und einigen JavaScript-Elementen, um Anmeldeinformationen abzurufen und mit den Vonage Video-Servern zu kommunizieren.
Da es sich um eine Browser-Demo handelt, verwenden wir das JavaScript-SDK, das sich unter https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.jsund fügen es in ein Skript-Tag in unserem HTML-Code ein. index.html.
Der Gastgeber
Für die Ansicht des Hosts benötigen wir eigentlich nur die Kamera des Hosts sowie eine Benutzeroberfläche zur Steuerung verschiedener Optionen, wie z. B. das Starten der Übertragung, das Aktivieren niedriger Latenzzeiten und Statusaktualisierungen. Um die eigene Kamera zu sehen, machen wir eine <div> Element, um das Videoelement zu hosten:
Der Rest der Host-Seite besteht aus Schaltflächen und Einstellungen für die Live-Übertragung selbst. Wir werden alle Optionen in Ruhe lassen und uns um die Broadcast Controls kümmern. Dies sind nur einige einfache Schaltflächen, die wir verdrahten werden, um die Serveranwendung zum Starten und Stoppen der Broadcast-Feeds aufzurufen.
Unsere Verbindung in JavaScript ist im Vergleich zu anderen Konstellationen, bei denen mehrere Personen zusammenarbeiten, minimal. Normalerweise würden wir uns mit der Sitzung verbinden und dann sofort unsere Video- und Audiostreams veröffentlichen, aber da wir kontrollieren, wann eine Übertragung beginnt und endet, werden wir dies in zwei Schritten tun. Zunächst stellen wir wie gewohnt eine Verbindung zur Sitzung her:
// js/host.js
document.addEventListener('DOMContentLoaded', async () => {
const credentials = await getCredentials('host');
const session = OT.initSession(
credentials.applicationId,
credentials.sessionId,
{
connectEventsSuppressed: true
}
);
session.connect(credentials.token, (error) => {
if (error) {
console.error(error);
return;
}
let publisher = initPublisher();
// ...
Sobald wir eine Verbindung zum Stream hergestellt haben, fügen wir einen Ereignis-Listener auf der btn-start Schaltfläche, damit wir den Stream tatsächlich veröffentlichen und starten, wenn der Benutzer diese Schaltfläche drückt. Das Starten (und Beenden) der Übertragung wird von den serverseitigen SDKs gehandhabt, wir stellen also eine Anfrage an unseren Backend-Server, um die Übertragung zu starten.
// js/host.js
document.getElementById('btn-start').addEventListener('click', async (el, event) => {
const rtmp = [];
if (document.getElementById('rtmpAddress').value) {
rtmp.push({
serverUrl: document.getElementById('rtmpAddress').value,
streamName: document.getElementById('rtmpKey').value,
});
}
broadcast = await fetch(`${SAMPLE_SERVER_BASE_URL}/broadcast/session/start`, {
method: "POST",
body: JSON.stringify({
rtmp,
lowLatency: document.getElementById('lowLatency').checked,
dvr: document.getElementById('dvr').checked,
sessionId: session.id,
streamMode: "auto"
}),
headers: {
"Content-type": "application/json"
}
})
.then(res => {
// Once the broadcast starts we finally publish the host
session.publish(publisher);
shouldCheckBroadcast = true;
setTimeout(checkBroadcast, 5000);
return res.json()
})
.catch(error => console.error(error));
});
An diesem Punkt veröffentlicht unser Gastgeber nun über die Übertragung selbst sowie über jeden anderen, der eine Verbindung herstellt. Die Demo, die wir haben, unterstützt Gäste. Wenn also Gäste zu den Meetings eingeladen werden, werden ihre Streams automatisch von der Vonage Video API zur Übertragung hinzugefügt.
Das Stoppen des Broadcasts wird von der Serveranwendung durchgeführt, so dass ein kurzer Aufruf dieser Route auf unserem Backend-Server den Broadcast selbst stoppen wird. Wir hängen einen Ereignis-Listener an die btn-stop Schaltfläche, die beim Anklicken ausgelöst wird.
// js/host.js
document.getElementById('btn-end').addEventListener('click', async (el, event) => {
broadcast = await fetch(`${SAMPLE_SERVER_BASE_URL}/broadcast/session/stop`, {
method: "POST",
body: JSON.stringify({
sessionId: session.id
}),
headers: {
"Content-type": "application/json"
}
})
.then(res => {
session.unpublish(publisher);
shouldCheckBroadcast = false;
publisher = initPublisher();
return res.json()
})
.catch(error => console.error(error));
});
Der Betrachter - Stream-Übertragung
Für einen Betrachter brauchen wir nur einen Platz, um den Videostream des Gastgebers anzuzeigen. Da die Betrachter ihre eigenen Streams nicht veröffentlichen werden, müssen wir viel weniger Front-End-Code für sie verwenden. Wir erstellen eine <div> um den Stream des Hosts zu speichern.
Da ein Betrachter niemals seine eigenen Streams veröffentlicht, verbindet sich unser JavaScript einfach mit dem Stream und wartet darauf, dass Streams durch die Übertragung erstellt werden:
// js/view.js
const credentials = await getCredentials('viewer');
const session = OT.initSession(
credentials.applicationId,
credentials.sessionId,
{
connectEventsSuppressed: true
}
);
session.connect(credentials.token, (error) => {
if (error) {
console.log(error);
return;
}
session.on('streamCreated', (event) => {
session.subscribe(event.stream, 'host', {
insertMode: 'append',
width: '100%',
height: '100%',
})
});
});
Der Betrachter - HLS
Die Ausführung von HLS erfordert lediglich die Hinzufügung eines <video> Element zu verwenden, anstatt ein <div>. Wenn Sie stattdessen HLS verwenden möchten, stellen wir eine <video> Element, dem wir später eine Quelle hinzufügen werden. Beachten Sie, dass Sie für die meisten Browser zusätzliches JavaScript benötigen. Daher werden wir auch die HLS JavaScript-Bibliothek einbinden, die auf NPM verfügbar ist:
In unserer Demo erhält der Benutzer eine URL vom Host, die die Broadcast-URL als Abfrageparameter enthält. Damit werden wir den Stream an den Videoplayer anhängen. Wir werden auch einige grundlegende Überprüfungen durchführen, um sicherzustellen, dass HLS unterstützt wird, da nicht alle Browser HLS von Haus aus unterstützen.
const video = document.getElementById('video');
const videoSource = new URLSearchParams(window.location.search).get('url');
if (!videoSource) {
alert('No HLS URL was passed. No video will be displayed');
return;
}
if (Hls.isSupported()) {
const hls = new Hls();
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
video.muted = true;
video.play();
});
hls.loadSource(videoSource);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSource;
} else {
alert('Browser does not seem to have HLS capabilities. No video will be displayed');
return;
}
});
Die Server-Seite
Der serverseitige Teil jeder Vonage Video-Anwendung dient der Erstellung von Sitzungen, der Erzeugung von Authentifizierungstoken und administrativen Aufgaben wie dem Starten und Stoppen von Archiven. In dieser Demo geht es nur um die Erstellung von Sitzungen und Token, damit Benutzer dem Raum beitreten können. Obwohl die API selbst eine REST-API ist und nach Belieben aufgerufen werden kann, empfehlen wir Ihnen die Verwendung der Vonage Node SDK die alle Authentifizierungs- und HTTP-Aufrufe für Sie erledigt. Sie können es in Ihrer eigenen Anwendung mit installieren:
npm install -s @vonage/server-sdk
Im Democode ist es bereits vorinstalliert. Wenn Sie den Code lokal ausführen, müssen Sie ihn ausführen:
npm install
um alle Abhängigkeiten herunterzuladen, und kopieren Sie dann .envcopy in eine neue Datei mit dem Namen .env. Sie müssen die geforderten Informationen in folgende Felder eintragen .env wie die Application ID, den Speicherort des privaten Schlüssels auf der Festplatte und Ihren Vonage API-Schlüssel und -Geheimnis.
Der Gastgeber
Wir geben dem Gastgeber eine moderator Rolle, so dass wir, wenn das Frontend nach Anmeldeinformationen fragt, die Sitzung mit der entsprechenden Rolle erstellen. Ansonsten gibt es fast keinen Unterschied zwischen der Sitzung für einen Live-Broadcast-Host und einem normalen Videonutzer mit der moderator Rolle.
// routes/index.js
router.get('/broadcast/:name/host', async function (req, res) {
const broadcastName = req.params.name + '-broadcast';
await createSession(res, broadcastName, { initialLayoutClassList: ['full', 'focus'] }, 'moderator');
});
Weitere Informationen zur Erstellung von Token finden Sie in unserem Anwendungsfall "One-on-One-Video in der beschrieben wird, wie Sitzungen erstellt werden können.
Wenn der Benutzer die Übertragung tatsächlich starten möchte, verwenden wir das Server-SDK, um die Funktion vonage.video.startBroadcast() Methode, die die veröffentlichten Streams in eine Broadcast-Session umwandelt. Diese Daten werden dann an den Client zurückgegeben, so dass dieser über alle erforderlichen Informationen verfügt, um die Übertragung nachzuschlagen und sie später zu steuern.
// routes/index.js
router.post('/broadcast/:room/start', async (req, res) => {
const { rtmp, lowLatency, fhd, dvr, sessionId, streamMode } = req.body;
// Kill any existing broadcasts we have, to be safe
vonage.video.searchBroadcasts({sessionId})
.then(list => {
list.items.map(async (broadcast) => {
vonage.video.stopBroadcast(broadcast.id)
})
})
vonage.video.startBroadcast(sessionId, {outputs: {rtmp, hls: {lowLatency, dvr}}, streamMode})
.then(data => {
broadcastsToSessionIdDictionary[sessionId] = data;
res.send(data)
})
.catch(error => {
console.error(error);
res.status(500).send(error)
})
})
Das Beenden der Übertragung ist meistens gleich - wir rufen die Server SDK's vonage.video.stopBroadcast() Methode, um die Übertragung zu beenden.
// routes/index.js
router.post('/broadcast/:room/stop', async (req, res) => {
const { sessionId } = req.body
if (broadcastsToSessionIdDictionary[sessionId]) {
vonage.video.stopBroadcast(broadcastsToSessionIdDictionary[sessionId].id)
.then(data => {
delete broadcastsToSessionIdDictionary[sessionId]
res.send(data)
})
.catch(err => {
console.error(err)
res.status(500).send(err)
})
}
})
Der Betrachter - Stream-Übertragung
In einer Broadcast-Situation müssen wir dem Betrachter nur den entsprechenden Typ des Verbindungs-Tokens geben. Alles andere wird im Browser durch den clientseitigen Code erledigt.
router.get('/broadcast/:name/viewer', async function (req, res) {
const broadcastName = req.params.name + '-broadcast';
await createSession(res, broadcastName, { initialLayoutClassList: ['full', 'focus'] }, 'subscriber');
});
Der Betrachter - HLS
Zuschauer, die über HLS zusehen, benötigen keine speziellen Verbindungsinformationen, da alles über den Videoplayer und die Sende-URL übertragen wird. Daher ist kein serverseitiger Code zur Generierung von Token erforderlich. Wenn Sie die Anzeige einer Sendung für Zuschauer einschränken möchten, müssen Sie dies in Ihre Anwendung integrieren.
Schlussfolgerung
In diesem Tutorial haben Sie gesehen, was in den Backend-Server für Stream- und HLS-basierte Übertragungen eingeht, wie man einen Web-Client erstellt, mit dem Benutzer Übertragungen ansehen können, und wie einfach es ist, den Vonage Code Hub und Stack Blitz zum schnellen Testen von Beispielen zu verwenden.